<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       *{padding:0;margin:0;list-style:none;}
           div{
               width: 100%;
               height: 40px;
               text-align:center;
               font:20px/40px microsoft yahei;
               background-color:#666;
               color:orangered;
               position:relative;
               border-top:3px solid #333;
           }
           div span{
               font-size:40px;
               line-height:40px;
               position:absolute;
               right:5px;
               color:#eee;
           }
           ul{
               height:0;
               overflow: hidden;
               background-color:#666;
           }
           .s-height{
               height:0;
               overflow: hidden;
           }
           .e-height{
               height:auto;
               overflow: hidden;
           }
           ul li{
               width:100%;
               height: 40px;
               text-align:center;
               font:20px/40px microsoft yahei;
               color:lightskyblue;
           }
           li:hover,div:hover{
               background-color:orange;
               color:#fff;
           }

        @media (min-width:640px) and (max-width:999px) {
            div{
                display: none;
            }
            nav,ul{
                width: 100%;
                height:auto;
            }
            ul li{
                width: 14%;
                height: 50px;
                float:left;
                font:16px/50px microsoft yahei;
            }
        }
        @media (min-width:1000px){
            div{
                display: none;
            }
            nav,ul{
                width: 100%;
                height:auto;
            }
            ul li{
                width: 14%;
                height: 30px;
                float:left;
                font:12px/30px microsoft yahei;
            }
        }
    </style>
</head>
<body>
<nav>
    <ul>
        <li>首页home</li>
        <li>电影move</li>
        <li>电视剧tv play</li>
        <li>动漫domnc</li>
        <li>综艺variety</li>
        <li>纪录片documentary</li>
        <li>公开课public resourse</li>
    </ul>
    <div>腾讯视频<span>☰</span></div>
</nav>
<script>
        var oDiv=document.getElementsByTagName("div")[0];
        var oSpan=oDiv.getElementsByTagName("span")[0];
        var oUl=document.getElementsByTagName("ul")[0];
        var oBool=true;
        oSpan.onclick=function(){
            oBool?oUl.className="e-height":oUl.className="s-height";
            oBool=!oBool;
        }
</script>
</body>
</html>